<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript控制台</title>
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/codemirror/5.19.0/codemirror.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/codemirror/5.19.0/theme/blackboard.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/codemirror/5.19.0/theme/xq-dark.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/codemirror/5.19.0/codemirror.js"></script>
    <script src="//cdn.bootcss.com/codemirror/5.19.0/mode/javascript/javascript.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
         body{
             background-image: url('tiny_grid.png')
         }
    </style>
</head>

<body style="background-url:''">
    <div style="margin-top:10px;">
        <button type="button" onclick="executeJs()" class="btn btn-primary">执行</button>
        <button type="button" onclick="clearConsole()" class="btn btn-primary">清除</button>
    </div>

    <div class="row" style="margin-top:20px;">
        <div class="col-md-8">
            <textarea id="editor" style="background-color: black;" name="editor"></textarea>
        </div>
        <div class="col-md-4">
            <textarea id="con" style="background-color: black;width:100%;height:600px;color:white;" name="editor">
            
           </textarea>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script>
        var myTextarea = document.getElementById('editor');
        var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
            value: "function myScript(){return 100;}\n",
            mode: "text/javascript",
            lineNumbers: true,
            theme:'xq-dark',
            autoMatchParens: true,
            textWrapping: true
        });
        CodeMirrorEditor.setValue('console.log("welcome to console");');
        CodeMirrorEditor.setSize("100%","600")
        var con = document.querySelector("#con");
        console.olog = console.log;
        console.log = function() {
                //do what u want do;
              if(typeof arguments[0] =='object'){
                   con.innerHTML += ""+ [].join.call(JSON.stringify(arguments), '') + "\n";
              }else{
                   con.innerHTML += ""+ [].join.call(arguments, '') + "\n";
              }
              this.olog.apply(this, arguments);
         }

        function executeJs(){
            // $.ajax({
            //     url:'api.js',
            //     type:'get',
            //     success : function(data){
            //        eval(data);
            //     }
            // });
            eval(CodeMirrorEditor.getValue());
        }

        function clearConsole(){
            con.innerHTML='';
        }
    </script>
    <!--<script src="api.js"></script>-->
</body>

</html>